<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="user-info-section">
			<view class="user-info" v-if="isLogin">
				<image :src="getAvatarUrl(userInfo.avatar)" class="avatar"></image>
				<view class="user-detail">
					<text class="nickname">{{ userInfo.nickname }}</text>
					<text class="username">账号: {{ userInfo.username }}</text>
				</view>
			</view>
			<view class="user-info" v-else @click="goToLogin">
				<image src="/static/icons/default-avatar.png" class="avatar"></image>
				<view class="user-detail">
					<text class="nickname">点击登录</text>
					<text class="username">登录后享受更多功能</text>
				</view>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order-section">
			<view class="section-header">
				<text class="section-title">我的订单</text>
				<view class="more" @click="viewAllOrders">
					<text>查看全部</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="order-types">
				<view class="order-type-item" @click="viewOrdersByStatus('PENDING_PAYMENT')">
					<text class="iconfont icon-wallet"></text>
					<text>待付款</text>
				</view>
				<view class="order-type-item" @click="viewOrdersByStatus('PENDING_DELIVERY')">
					<text class="iconfont icon-package"></text>
					<text>待发货</text>
				</view>
				<view class="order-type-item" @click="viewOrdersByStatus('PENDING_RECEIPT')">
					<text class="iconfont icon-truck"></text>
					<text>待收货</text>
				</view>
				<view class="order-type-item" @click="viewOrdersByStatus('COMPLETED')">
					<text class="iconfont icon-comment"></text>
					<text>待评价</text>
				</view>
				<view class="order-type-item" @click="viewOrdersByStatus('AFTER_SALE')">
					<text class="iconfont icon-service"></text>
					<text>售后</text>
				</view>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-item" @click="navigateTo('/pages/address/address')">
				<text class="iconfont icon-location"></text>
				<text class="menu-text">收货地址</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item" @click="navigateTo('/pages/favorites/favorites')">
				<text class="iconfont icon-star"></text>
				<text class="menu-text">我的收藏</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item" @click="showDevelopingToast('优惠券')">
				<text class="iconfont icon-ticket"></text>
				<text class="menu-text">优惠券</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item" @click="showDevelopingToast('设置')">
				<text class="iconfont icon-settings"></text>
				<text class="menu-text">设置</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item" @click="showDevelopingToast('意见反馈')">
				<text class="iconfont icon-help"></text>
				<text class="menu-text">意见反馈</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		
		<!-- 退出登录 -->
		<view class="logout-section" v-if="isLogin">
			<button class="logout-btn" @click="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
import { SERVER_BASE_URL } from '@/utils/request';

export default {
	data() {
		return {
			isLogin: false,
			userInfo: {},
			serverBaseUrl: SERVER_BASE_URL
		};
	},
	onShow() {
		// 每次显示页面时检查登录状态
		this.checkLoginStatus();
	},
	methods: {
		// 检查登录状态
		checkLoginStatus() {
			const userStr = uni.getStorageSync('user');
			if (userStr) {
				try {
					const userInfo = JSON.parse(userStr);
					if (userInfo && userInfo.id) {
						this.isLogin = true;
						this.userInfo = userInfo;
					} else {
						this.isLogin = false;
						this.userInfo = {};
					}
				} catch (error) {
					console.error('解析用户信息失败', error);
					this.isLogin = false;
					this.userInfo = {};
				}
			} else {
				this.isLogin = false;
				this.userInfo = {};
			}
		},
		
		// 跳转到登录页
		goToLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		
		// 查看全部订单
		viewAllOrders() {
			if (!this.isLogin) {
				this.goToLogin();
				return;
			}
			
			uni.navigateTo({
				url: '/pages/order/list'
			});
		},
		
		// 按状态查看订单
		viewOrdersByStatus(status) {
			if (!this.isLogin) {
				this.goToLogin();
				return;
			}
			
			uni.navigateTo({
				url: `/pages/order/list?status=${status}`
			});
		},
		
		// 通用导航方法
		navigateTo(url) {
			if (!this.isLogin) {
				this.goToLogin();
				return;
			}
			
			uni.navigateTo({
				url
			});
		},
		
		// 退出登录
		logout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						uni.removeStorageSync('user');
						uni.removeStorageSync('token');
						
						this.isLogin = false;
						this.userInfo = {};
						
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						});
					}
				}
			});
		},
		
		// 获取头像URL
		getAvatarUrl(avatar) {
			if (avatar) {
				return `${this.serverBaseUrl}${avatar}`;
			} else {
				return '/static/icons/default-avatar.png';
			}
		},
		
		// 显示正在开发中的提示
		showDevelopingToast(text) {
			uni.showToast({
				title: `${text}功能正在开发中`,
				icon: 'none'
			});
		}
	}
};
</script>

<style>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 用户信息区域 */
.user-info-section {
	background-color: #409EFF;
	padding: 40rpx 30rpx;
	color: #ffffff;
}

.user-info {
	display: flex;
	align-items: center;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.5);
}

.user-detail {
	margin-left: 30rpx;
}

.nickname {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.username {
	font-size: 24rpx;
	opacity: 0.8;
}

/* 订单区域 */
.order-section {
	margin: 20rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 20rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}

.more {
	font-size: 24rpx;
	color: #999;
	display: flex;
	align-items: center;
}

.order-types {
	display: flex;
	padding: 30rpx 0;
}

.order-type-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.order-type-item .iconfont {
	font-size: 48rpx;
	margin-bottom: 10rpx;
	color: #409EFF;
}

.order-type-item text:last-child {
	font-size: 24rpx;
	color: #666;
}

/* 菜单区域 */
.menu-section {
	margin: 20rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 10rpx 20rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item .iconfont:first-child {
	font-size: 40rpx;
	color: #409EFF;
	margin-right: 20rpx;
}

.menu-text {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.menu-item .iconfont:last-child {
	font-size: 24rpx;
	color: #999;
}

/* 退出登录按钮 */
.logout-section {
	margin: 40rpx 20rpx;
}

.logout-btn {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	background-color: #ffffff;
	color: #ff4d4f;
	font-size: 30rpx;
	border-radius: 12rpx;
}
</style> 